<template>
	<view class="changeName">
		<view class="cn_input">
			<input class="uni-input" v-model="name" placeholder="请输入昵称" :focus="focus" maxlength="8" />
			<image src="/static/xs_icon/delete1.png" mode="" @click="clickClear()"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			focus: false
		};
	},
	onLoad(e) {
		this.name = e.name;
		// console.log(this.letterList)
	},
	created() {
		// console.log(this.letterList.length)
	},
	methods: {
		// 名字清空 比过去焦点
		clickClear() {
			this.name = '';
			this.focus = true;
		},
		// 修改个人信息
		modifyPersonalData() {
			this.$popup.showLoading();
			const USER_INFO = uni.getStorageSync('USER_INFO');
			const data = {
				sex: USER_INFO.sex,
				head_img: USER_INFO.head_img,
				user_nickname: this.name
			};
			this.$api
				.post(global.apiUrls.modifyPersonalData, data)
				.then(res => {
					console.log(user);
					uni.hideLoading();
					const user = res.data.data;
					if (res.data.code == 1) {
						uni.setStorageSync('USER_INFO', user.userinfo);
						this.$message.info('修改成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		}
	},
	onNavigationBarButtonTap(e) {
		console.log('按钮点击事件');
		this.modifyPersonalData();
		if (this.name == '') return this.$message.info('请输入姓名');
	}
};
</script>

<style lang="scss" >
page {
	background-color: #f2f3f4;
}
.changeName {
	background-color: #fff;
	.cn_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 52upx 36upx;
		image {
			width: 36upx;
			height: 36upx;
		}
		.uni-input {
			width: 88%;
		}
	}
}
</style>
